<template>
  <div class="bg-gray-100 min-h-screen">
    <div class="container mx-auto p-4">
      <!-- 轮播图区域 -->
      <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="col-span-3 bg-white rounded-lg h-[400px] overflow-hidden">
          <img src="https://picsum.photos/id/1/1200/400" alt="banner" class="w-full h-full object-cover">
        </div>
        <div class="space-y-4">
          <div class="bg-white rounded-lg p-4">
            <div class="text-center mb-4">
              <div class="w-16 h-16 rounded-full bg-gray-200 mx-auto mb-2"></div>
              <p>Hi！欢迎来淘商城</p>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <button class="bg-[#FF4400] text-white py-2 rounded">登录</button>
              <button class="border border-[#FF4400] text-[#FF4400] py-2 rounded">注册</button>
            </div>
          </div>
          <div class="bg-white rounded-lg p-4">
            <h3 class="font-bold mb-2">公告</h3>
            <p class="text-sm text-gray-600">最新优惠活动正在进行中...</p>
          </div>
        </div>
      </div>

      <!-- 商品推荐 -->
      <div class="bg-white rounded-lg p-4 mb-6">
        <h2 class="text-xl font-bold mb-4">商品推荐</h2>
        <div class="grid grid-cols-6 gap-4">
          <div v-for="product in featuredProducts" 
               :key="product.id"
               class="group cursor-pointer">
            <div class="aspect-square overflow-hidden rounded-lg mb-2">
              <img :src="product.image" 
                   :alt="product.title" 
                   class="w-full h-full object-cover group-hover:scale-110 transition">
            </div>
            <h3 class="text-sm font-medium line-clamp-2 mb-1">{{ product.title }}</h3>
            <p class="text-[#FF4400] font-bold">¥{{ product.price.toFixed(2) }}</p>
          </div>
        </div>
      </div>

      <!-- 商品分类 -->
      <div class="grid grid-cols-4 gap-4">
        <div v-for="product in featuredProducts.slice(0, 4)" 
             :key="product.id"
             class="bg-white rounded-lg p-4 hover:shadow-lg transition">
          <router-link :to="`/product/${product.id}`">
            <img :src="product.image" 
                 :alt="product.title" 
                 class="w-full aspect-square object-cover rounded-lg mb-4">
            <h3 class="text-lg font-medium mb-2 line-clamp-2">{{ product.title }}</h3>
            <p class="text-[#FF4400] text-xl font-bold">¥{{ product.price.toFixed(2) }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useProductStore } from '../store/productStore'
import type { Product } from '../types'

const productStore = useProductStore()
const featuredProducts = ref<Product[]>([])

onMounted(async () => {
  await productStore.fetchProducts()
  featuredProducts.value = productStore.products
})
</script> 